<template>
    <div class="body">
        <div class="footer">
            <p class="dialog">{{(parseFloat($store.getters.delivery[0][0]) - parseFloat(totalPrice)) <= 0?'已满足最低配送标准':'还差'+(parseFloat($store.getters.delivery[0][0]) - parseFloat(totalPrice)).toFixed(2)+'元起送'}}</p>
            <p class="iconfont icon-gouwuche icon" :class="cartList.length?'icon-1':''" @click="onShowCart">
                <mt-badge class="my-badge" size="small" type="error">{{cartList.length}}</mt-badge>
            </p>
            <div class="price"  @click="onShowCart">
                <p>￥{{totalPrice}}</p>
                <p>服务费:￥{{getDelivery(totalPrice)?getDelivery(totalPrice):`0.00`}}</p>
            </div>
            <mt-button class="btn" :class="cartList.length && totalPrice>=parseFloat($store.getters.delivery[0][0])?'btn-1':''" :disabled='parseFloat(totalPrice)<parseFloat($store.getters.delivery[0][0])' @click="orderForm">结算</mt-button>
        </div>
        <mt-popup
        v-model="showCart"
        position="bottom">
            <!-- <div class="shop_cart">
                <p class="iconfont icon-shanchu del-icon" v-if="cartList.length !== 0" @click="delCart">清空</p>
                <p class="no_data" v-else>暂无商品</p>
                <div class="cart-list" v-for="(item,index) of $store.getters.cart" :key="index" v-show="cartList.length !== 0">
                    <div class="cart-item">
                        <p>{{item.name}}</p>
                        <p class="cart-item-details" v-if="item.veg_text">({{item.meat_text}},{{item.veg_text}})</p>
                    </div>
                    <span class="cart-item add-cart"><i class="iconfont icon-jian" @click="add(item,-1)"></i>{{item.num}}<i class="iconfont icon-jia" @click="add(item,1)"></i></span>
                    <span class="cart-item">￥{{item.price}}</span>
                </div>
            </div> -->
            <div class="cart-content">
                <div class="cart-bar">
                    <p>餐盒费:￥{{getBoxFee($store.getters.cart)}}</p>
                    <p class="iconfont icon-lajitong del-icon" v-if="cartList.length !== 0" @click="delCart">清空购物车</p>
                </div>
                <mt-cell class="my-cell" title="暂无商品" v-if="cartList.length == 0"></mt-cell>
                <mt-cell class="my-cell" v-for="(item,index) of cartList" :key="index">
                    <template #title>
                            <div class="cart-text">
                                <p>{{item.name}}</p>
                                <p class="cart-item-details" v-if="item.veg_text">({{item.meat_text}},{{item.veg_text}})</p>
                                <p class="cart-money"><span style="font-size:0.7rem">￥</span>{{item.price}}</p>
                            </div>
                    </template>
                    <span class="cart-item add-cart"><i class="iconfont icon-jian" @click="add(item,-1)"></i>{{item.num}}<i class="iconfont icon-jia" @click="add(item,1)"></i></span>
                        <!-- <span class="cart-item">￥{{item.price}}</span> -->
                    <img slot="icon" class="goods-img" :src="$store.getters.base_url+item.pic" width="60" height="60">
                </mt-cell>
            </div>
        </mt-popup>
    </div>
</template>
<script>
import {cartList,emptyCart,plusMinusCart} from '../api'
import {Toast} from 'mint-ui'
import {checkTime} from '../time'
export default {
    name:"shopFooter",
    props:['shop_info'],
    data() {
        return {
            showCart:false,
            cartList:[],
            totalPrice:0,
            // shop_info:[]
            // carriage:this.$store.getters.freight.delivery
        }
    },
    created(){
        this.getTotalPrice()
        // console.log(this.$store.getters.shop_name.lunchbox_fee);
        // this.shop_info = this.$store.getters.shop_name;
        
    },
    methods:{
        getBoxFee(cart){
            let total = 0;
            for(let i of cart){
                console.log(i);
                total += i.num*i.lunchbox_fee;
            }
            // console.log(total);
            return total.toFixed(2);
        },
        getDelivery(p){
            let delivery = this.$store.getters.delivery;
            p = parseFloat(p);
            // console.log(delivery);
            for(let i of delivery){
                if(p>=parseFloat(i[0]) && p<=parseFloat(i[1])){
                    return i[2];
                }
            }
        },
        add(goods,type){
            goods.num +=type;
            if(goods.num == 0){
                let i = this.cartList.indexOf(goods);
                if(i>-1){
                    this.cartList.splice(i,1);
                }
            }
            const data = {
                store_id:parseInt(this.$route.query.id),
                token:this.$store.getters.token,
                user_id:this.$store.getters.userInfo.id,
                goods_id:goods.goods_id,
                id:goods.id,
                type}
            console.log(data);
            plusMinusCart(data).then(res=>{
                console.log(goods);
                this.$store.commit('ADD_TOTAL',goods.price,type);
                this.getTotalPrice();
                this.$emit('updateNum',{type,goods});
            })
        },
        orderForm(){
            if(this.totalPrice <= 0){
                Toast('请选择商品')
                return;
            }else if(!checkTime(this.shop_info.time_interval)){
                Toast('未在店铺营业时间内,暂不能下单');
                return;
            }else{
                // const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id,total:this.totalPrice,delivery_price:this.carriage}
                // newOrder().then(res=>{
                //     console.log(res);
                // })
                // console.log(this.$route.query.id);
                this.$router.push({path:'/creatOrder',query:{store_id:this.$route.query.id}})
            }
        },
        getTotalPrice(){
                const data = {store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id}
                cartList(data).then(res=>{
                    this.$set(this,'cartList',res.data);
                    this.$store.commit('ADD_CART',res.data);
                    let math = require('mathjs');
                    // console.log(this.$store.getters.cart)
                    let cart = this.$store.getters.cart;
                    let total=0;
                    for(let item of cart){
                        // total+=item.price*item.num;
                        total+=item.price*item.num
                    }
                    this.totalPrice = total.toFixed(2);
                    this.$store.commit('TOTAL',this.totalPrice)
                    
                    // const freight = this.$store.getters.freight;
                    // console.log(total >= freight.limit)
                    // if(this.totalPrice >= freight.limit){
                    //     this.carriage = Math.round((Number(this.totalPrice)*Number(freight.percentage)*0.01*100))/100;
                    // }else{
                    //     this.carriage = freight.delivery;
                    // }
                    // this.$store.commit('CARRIAGE',this.carriage)
                })
        },
        onShowCart(){
            if(this.cartList.length){
                this.showCart = !this.showCart
            }
        },
        delCart(){
            const data={store_id:parseInt(this.$route.query.id),token:this.$store.getters.token,user_id:this.$store.getters.userInfo.id}
                emptyCart(data).then(res=>{
                    // console.log(res);
                    this.$store.commit("DEL_CART");
                    this.getTotalPrice();
                    this.$emit('delNum');
                    this.showCart = !this.showCart;
                })
        }
    }
}
</script>
<style scoped>
    .footer {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        background: #F7F7F7;
        color: #fff;
        height: 4rem;
        z-index: 10000;
    }
    .icon {
        font-size: 2rem;
        background: #aaa;
        color: #fff;
        border-radius: 50%;
        padding: 0.5rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        font-weight: bolder;
        margin: -1rem 0 0 0.5rem;
        box-shadow: 0.1rem 0.1rem 0.2rem #ccc;
        position: relative;
        z-index: 100;
    }
    .icon-1{
        background: #fff;
        color: #333;
    }
    .price {
        margin-top: 0.5rem;
        height: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40%;
        color: #F23D3D;
        font-weight: bolder;
    }
    .price p:not(:first-child){
        color: #9b9b9b;
        font-size: 0.8rem;
    }
    .btn{
        width:40%;
        height: 100%;
        margin: 0;
        background: #ccc;
        border-radius: 0;
        color: #fff;
        font-size: 1rem;
    }
    .btn-1{
        background: #F23D3D;
        font-size: 1.5rem;
    }
    .mint-popup-bottom{
        width: 100%;
    }
    .shop-cart {
        width: 100%;
        min-height: 2rem;
    }
    .no_data {
        text-align: center;
        line-height: 2rem;
        color: #fff;
    }
    .hidden {
        bottom: 0;
        display: none;
        transition: all 2s;
    }
    .del-icon {
        text-align: right;
        /* padding:0.4rem; */
        font-size: 0.9rem;
    }
    .goods-img{
        border-radius: 0.2rem;
    }
    .cart-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cart-item{
        color: #F23D3D;
    }
    .cart-item-details{
        font-size: 0.6rem;
        line-height: 1rem;
    }
    .add-cart{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .add-cart .iconfont{
        font-size: 1.4rem;
    }
    .dialog{
        position: absolute;
        color: #333;
        top: -2rem;
        background: rgba(250, 218, 141, 0.8);
        width: 100%;
        line-height: 2rem;
        text-align: center;
        font-size: 0.9rem;
    }
    .my-cell{
        padding: 0.5rem 0;
    }
    .body >>> .mint-cell-title{
        display: flex;
        line-height: normal;
    }
    .cart-text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding:0 0.4rem;
    }
    .cart-money{
        color: #F23D3D;
    }
    .cart-content{
        margin-bottom: 6rem;
    }
    .cart-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        padding:0.4rem;
    }
    .my-badge{
        line-height: normal;
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: 0.8rem;
        right: 0.4rem;
        border-radius: 50%;
        padding: 0;
        line-height: 1rem;
        text-align: center;
        font-size: 0.6rem;
    }
</style>